@import './../common.less';
@import './../lxa.less';
.page-wrapper{
  padding-bottom: 3rem;
  width: 100%;
  height: auto;
  position: absolute;
  box-sizing: border-box;
  overflow-y: scroll;
  .top {
    background-color: #fff;
    .search-area {
      // display: flex;
      padding: 0.667rem;
  
      .search-btn {
        height: 1.867rem;
        border-radius: 0.93rem;
        border: 1px solid @grey-2;
        text-align: center;
        display: block;
        display: flex;
        align-items: center;
        justify-content: center;
  
        .icon-search {
          height: 0.9067rem;
          margin-right: 0.267rem;
          color: @lightBlack;
        }
      }
    }
    .el-carousel__item h3 {
      color: #475669;
      font-size: 0.75rem;
      opacity: 0.75;
      line-height: 4rem;
      margin: 0;
    }
  
    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }
    
    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }
    .main-nav {
      height: 5.067rem;
      display: flex;
      justify-content: space-around;
  
      .nav-item {
        text-align: center;
        padding: 0.8rem 0.27rem 0;
        .nav-img {
          position: relative;
          width: 2.4rem;
          height: 2.4rem;
          .img {
            width: 2.4rem;
            height: 2.4rem;
          }
          .icon-hot {
            position: absolute;
            right: -0.32rem;
            top: 0;
            width: 1.2rem;
            height: 0.6rem;
            color: #fff;
            text-align: center;
  
            .hot-title {
              position: relative;
              z-index: 2;
              line-height: 0.6rem;
              font-size: 0.75rem;
            }
            .icon-hot-bg {
              position: absolute;
              right: 0;
              top: 0;
              width: 1.2rem;
              height: 0.6rem;
            }
          }
        }
        .nav-title {
          margin-top: 0.373rem;
          font-size: 0.75rem;
          color: @black;
        }
      }
    }
  }
  .modals {
    .modal-item {
      margin-top: 0.53rem;
      background-color: #fff;
  
      .modal-header {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 2.67rem;
        border: 1px solid @grey-4;
        color: @black;
  
        .header-title {
          width: 8rem;
          height: 1.2rem;
          position: relative;
  
          .sub-title {
            position: absolute;
            font-size: 0.8rem;
            right: 1.6rem;
            top: 0.13rem;
          }
  
          .hot-rec-img {
            width: 8rem;
            height: 1.2rem;
          }
        }
      }
    }
  
    .recom-main {
      padding: 0.533rem;
      .scroll-view {
        width: 100%;
        white-space: nowrap;
        display: flex;
        justify-content: space-between;
  
        .item-link {
          display: inline-block;
          width: 5.33rem;
          margin-right: 0.533rem;
  
          &:last-child {
            margin-right: 0;
          }
        }
  
        .item {
          width: 5.33rem;
          border-radius: 0.4rem;
          background-color: #f9f9f9;
  
          .item-img {
            width: 5.33rem;
            height: 5.6rem;
          }
  
          .item-title {
            padding: 0 0.267rem;
            height: 1.68rem;
            font-size: 0.9rem;
            color: @black;
            line-height: 0.88rem;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            white-space: normal;
          }
          .item-price {
            font-size: 0.9rem;
            color: #fd7418;
          }
        }
      }
    }
    .project-main {
      padding: 0.533rem;
      display: flex;
      justify-content: space-between;
  
      .item {
        border-radius: 0.133rem;
        overflow: hidden;
      }
      .project-left {
        width: 9.2267rem;
        height: 10.133rem;;
  
        .item-img {
          width: 100%;
          height: 100%;
        }
      }
      .project-right {
        width: 9.2267rem;
        height: 10.133rem;
  
        .right-top,
        .right-bottom {
          width: 100%;
          height: 4.933rem;
  
          .item-img {
            width: 100%;
            height: 100%;
          }
        }
  
        .right-bottom {
          margin-top: 0.267rem;
        }
      }
    }
    .prefer-main {
      padding: 0.533rem;
  
      .item-link {
        display: inline-block;
        width: 50%;
        margin-bottom: 0.533rem;
        border-radius: 0.133rem;
        overflow: hidden;
      }
    }
    .item {
      width: 100%;
      border-radius: 0.133rem;
      background-color: #f9f9f9;
  
      .item-img {
        width: 100%;
        height: 11.067rem;
      }
  
      .item-title {
        padding: 0 0.267rem;
        height: 2.133rem;
        font-size: 0.8rem;
        color: @black;
        line-height: 1.0667rem;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        white-space: normal;
      }
      .item-price {
        font-size: 0.8rem;
        line-height: 1.6rem;
        color: #fd7418;
      }
  
      &.small {
        width: 5.333rem;
  
        .item-img {
          width: 5.333rem;
          height: 5.6rem;
        }
        .item-title {
          padding: 0 0.267rem;
          height: 1.333rem;
          font-size: 0.9rem;
          line-height: 0.7467rem;
        }
        .item-price {
          font-size: 0.9rem;
        }
      }
    }
  }
  .qian-w{
    position: fixed;
      width: 80%;
      height: 10rem;
      background: #fff;
      top: 10rem;
      left: 10%;
      z-index: 999;
    .qian-dialog {
      // background-color: #fff;
      position: relative;
      width: 100%;
    
      .header-bg {
        position: absolute;
        top: -1.333rem;
        width: 100%;
        height: 5.867rem;
        z-index: 5;
      }
    
      .dialog-content {
        background-color: #fff;
        border-radius: 0.133rem;
        overflow: hidden;
    
        .qian-header {
          height: 2.4rem;
          background-color: @orange;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #fff;
          font-size: 0.75rem;
    
          .qian-icon {
            width: 0.9067rem;
            height: 0.9067rem;
            margin-right: 0.267rem;
          }
        }
        .qian-body {
          padding: 1.067rem 1.2rem;
    
          .list-content {
            border-radius: 0.133rem;
            overflow: hidden;
    
            .first,
            .second {
              display: flex;
              width: 100%;
    
              .it {
                flex: 1;
                width: 3.733rem;
                height: 3.467rem;
                background-color: @grey-4;
                text-align: center;
                margin-right: 0.0533rem;
                // padding-top: 100%;
    
                &.active {
                  background-color: @orange;
                  .num,
                  .day {
                    color: #fff;
                  }
                }
    
                .num {
                  margin-top: 0.667rem;
                  font-size: 1.067rem;
                  color: @orange;
                }
                .day {
                  margin-top: 0.267rem;
                  font-size: 0.75rem;
                  color: @greydark;
                }
              }
              .large {
                flex: 2;
              }
            }
            .first {
              margin-bottom: 0.053rem;
            }
          }
    
          .btns {
            margin-top: 1.067rem;
            display: flex;
            justify-content: center;
    
            .btn {
              margin: 0 0.533rem;
              .btn(
                @w:4.8rem,
                @h:1.6rem,
                @c:#fff,
                @br:0.8rem,
                @bg:#fd7418,
                @b:1px solid #fd7418
              );
    
              &.cancel-btn {
                color: @lightBlack;
                background-color: #fff;
                border: 1px solid @lightBlack;
              }
            }
          }
        }
      }
    }
  }
}


